<template>
  <div>
    <div
      id="gauge-chart"
      style="padding: 0 10px; width: 200px; height: 200px;"
    />
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  export default {
    name: 'Gauge',
    props: {
      pue: {
        type: Number,
        default: 0,
      }
    },
    watch: {
      pue() {
        this.drawGaugeChart()
      }
    },
    methods: {
      drawGaugeChart() {
        const gaugeChart = echarts.init(document.getElementById('gauge-chart'))
        const option = {
          tooltip: {
            formatter: '{a} <br/>{c} {b}'
          },
          toolbox: {
            show: false,
          },
          series: [
          {
            name: '能效',
            type: 'gauge',
            z: 3,
            min: 0,
            max: 3,
            splitNumber: 3, // 分割段数
            radius: '80%',
            detail: {
              formatter: (value) => "PUE=" + value.toFixed(2),
              offsetCenter: ["0", "75%"],
              color: 'rgba(30, 159, 255, 100)',
              fontWeight: 'bold',
              fontSize: 14,
            },
            axisTick: { // 坐标轴小标记
              width: 10,
              lineStyle: { // 属性lineStyle控制线条样式
                color: 'auto'
              }
            },
            axisLine: {
              lineStyle: {
                width: 10,
                color: [
                  [.3, '#07D441'],
                  [.7, '#FF8F18'],
                  [1, '#FF1818']
                ]
              }
            },
            splitLine: { // 分隔线
              length: 10,
              lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                color: 'auto'
              }
            },
            itemStyle: {
              color: "#FF1818"
            },
            pointer: {
              show: true,
              length: "40%"
            },
            title: {
              show: true,
              offsetCenter: ["0%", "98%"],
              color: 'rgba(30, 159, 255, 100)',
              fontWeight: 'bold',
              fontSize: 14,
            },
            data: [{ value: this.pue, name: '' }]
          }]
        }
        gaugeChart.setOption(option, true)
      },
    },
  }
</script>